<template>
  <div class="village">
    <el-card class="box-card">
      <!-- 查询 -->
      <div class="village_top">
        <Search
          :inputList="inputList"
          :search="search"
          @getseach="getseach"
          @onReset="onReset"
        />
      </div>
      <!-- 表格头部操作-->
      <div class="addbtn">
        <!-- 按钮 -->
        <div>
          <el-button
            type="primary"
            size="small"
            @click="add"
            style="padding: 9px 20px"
            >新增</el-button
          >
        </div>
        <!-- 字段筛选 -->
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-setting"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div class="shez-tr">
              <el-checkbox
                v-for="(item, index) in hreadList"
                :key="index"
                v-model="item.isShow"
                >{{ item.name }}</el-checkbox
              >
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="table_container" v-loading="loading">
        <!-- 表格 -->
        <el-table ref="table" :data="dataList" show-header>
          <template v-for="(item, key) in hreadList">
            <el-table-column
              :min-width="item.width"
              :align="item.align"
              :label="item.name"
              :fixed="item.fixed"
              v-if="item.isShow"
              :key="key"
              :show-overflow-tooltip="item.toolshow"
            >
              <template slot-scope="{ row, $index }">
                <span v-if="item.prop === 'index'">
                  {{
                    (pagination.page - 1) * pagination.limit + $index + 1
                  }}</span
                >
                <div class="option" v-else-if="item.prop === 'option'">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="(e) => onConfirm(row.id)"
                  >
                    <el-button
                      slot="reference"
                      style="margin: 0 10px"
                      size="small"
                      icon="el-icon-delete"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </div>
                <span v-else>{{ row[item.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :current-page.sync="pagination.page"
          background
          layout="prev, pager, next,sizes, jumper"
          :total="totalNum"
          @current-change="pageFn"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    <!-- 新增修改抽屉 -->
    <addOrUpdate
      v-if="drawer"
      :drawer="drawer"
      @handleClose="handleClose"
      @getList="getList"
    />
  </div>
</template>

<script>
import addOrUpdate from './addOrUpdate';
import inputList from './inputList.vue';
// import { getSearch, setDelete } from '@servers/text';
export default {
  name: 'Electron',
  mixins: [inputList],
  components: { addOrUpdate },
  data() {
    return {
      //加载
      loading: false,
      //弹框是否关闭
      drawer: false,
      // 查询条件
      search: {
        ajmc: undefined, // 案件名称
        ajxz: undefined, // 案件性质（编码）
        bajg: undefined, // 办案机构（编码）
        larqq: undefined, // 立案日期起
        larqz: undefined, // 立案日期止
        daya: undefined, // 大要案
        isdzda: undefined // 是否存在电子档案
      },
      dataList: [
        {
          ajmc: '样例名称1',
          ajxz: '样例名称2',
          bajg: '样例名称3',
          larq: '样例名称4'
        },
        {
          ajmc: '样例名称1',
          ajxz: '样例名称2',
          bajg: '样例名称3',
          larq: '样例名称4'
        },
        {
          ajmc: '样例名称1',
          ajxz: '样例名称2',
          bajg: '样例名称3',
          larq: '样例名称4'
        }
      ], // 列表数据
      totalNum: 0, //分页总条数
      //分页参数
      pagination: {
        page: 1,
        limit: 10
      }
    };
  },
  created() {},
  methods: {
    //删除
    async onConfirm(id) {
      console.log(id);
      // const res = await setDelete(id);
      // if (res && res.success) {
      //   this.$message.success('删除成功!');
      //   this.getseach();
      // } else {
      //   this.$message.error(res.errorMsg);
      // }
    },
    //弹框是否关闭操作
    handleClose() {
      const { drawer } = this;
      this.drawer = !drawer;
    },
    //新增
    add() {
      this.handleClose();
    },
    // 接口查询
    async getList() {
      this.loading = true;
      // console.log({ ...this.pagination, ...this.search });
      // const res = await getSearch({ ...this.pagination, ...this.search });
      // if (res && res.success) {
      //   this.dataList = res.data || [];
      // } else {
      //   this.$message.error(res.errorMsg);
      // }
      //关闭加载
      this.loading = false;
    },
    // 重置
    onReset() {
      Object.assign(this.$data.search, this.$options.data().search);
      this.getList();
    },
    // 查询
    getseach() {
      this.search.limit = 10;
      this.search.page = 1;
      this.getList();
    },
    // 当前页数数
    pageFn(val) {
      this.pagination.page = val;
      this.loading = true;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
      this.loading = true;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../styles/village.scss';
</style>

<style lang="scss" scoped>
.shez-tr {
  display: flex;
  flex-flow: column;
  padding: 0 12px;
}
.el-upload-list {
  display: none !important;
}
.el-table--medium th,
.el-table--medium td {
  padding: 10px 0;
}
.el-table__fixed-right {
  right: 0 !important;
  height: calc(100% - 10px) !important;
}
.el-table__fixed-right-patch {
  border-bottom: none;
  background-color: #4c5acf !important;
}
.el-date-editor {
  width: 100% !important;
}
.addbtn {
  margin: 20px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    font-size: 20px;
    color: #3a52f0;
    margin-right: 6px;
    cursor: pointer;
  }
}
.option {
  display: flex;
  justify-content: center;
}
</style>
